import React, { Component } from 'react'
import {
  NavLink,
  Route,
  withRouter
} from 'react-router-dom'
import Home from './Home'
import User from './User'
import Position from './Position'
import Login from './Login'

const routers = [
  {
    path: '/home',
    component: Home,
    auth: false,
    txt: '首页'
  },
  {
    path: '/position',
    component: Position,
    auth: true,
    txt: "职位管理"
  },
  {
    path: '/user',
    component: User,
    auth: true,
    txt: "用户管理"
  }
]

 class Index extends Component {

  constructor() {
    super();
    this.state = {
      islogin: false
    }
  }

  login = () => {
    this.setState({
      islogin: true
    })
  }

  render() {
    return (
        <div>
          {/* <NavLink to="/home">首页</NavLink>
          &nbsp;
          <NavLink to="/position">职位管理</NavLink>
          &nbsp;
          <NavLink to="/user">用户管理</NavLink> */}
          <ul>
          {
            routers.map((router,index) => {
              return (
                <li key={index} >
                  <NavLink  to={router.path}>{router.txt}</NavLink>
                   &nbsp;
                </li>
              )

            })
          }
          </ul>

          {
            routers.map((router,index) => {
              return (
                // <Route path={router.path} component={router.component}></Route>
                <Route path={router.path} key={index} render={() => {
                  if (this.state.islogin || !router.auth) {
                    return <router.component></router.component>
                  } else {
                    return <Login handleLogin={this.login}></Login>
                  }

                }}></Route>
              )
            })
          }

<button onClick={
  ()=>{
    console.log(this.props)
    this.props.history.push('/user')
  }
}>去往用户管理</button>

        </div>
    )
  }
}

export default withRouter(Index)